
// import Home from '@/pages/Home/index.vue'
// import Register from '@/pages/Register/index.vue'
// import Search from '@/pages/Search/index.vue'
// import Login from '@/pages/Login/index.vue'
// import Detail from '@/pages/Detail/index.vue'
// import AddCartSuccess from '@/pages/AddCartSuccess/index.vue'
// import ShopCart from '@/pages/ShopCart/index.vue'
// import Trade from '@/pages/Trade/index.vue'
// import Pay from '@/pages/Pay/index.vue'
// import PaySuccess from '@/pages/PaySuccess/index.vue'
// import Center from '@/pages/Center/index.vue'
// import MyOrder from '@/pages/Center/MyOrder/index.vue'
// import GroupOrder from '@/pages/Center/GroupOrder/index.vue'

// 将路由组件的引入改为 路由懒加载的形式
const Home = ()=> import('@/pages/Home/index.vue')
const Register = ()=> import('@/pages/Register/index.vue')
const Search = ()=> import('@/pages/Search/index.vue')
const Login  = ()=> import('@/pages/Login/index.vue')
const Detail  = ()=> import('@/pages/Detail/index.vue')
const AddCartSuccess = ()=> import('@/pages/AddCartSuccess/index.vue')
const ShopCart = () => import('@/pages/ShopCart/index.vue')
const Trade = ()=>import('@/pages/Trade/index.vue')
const Pay = ()=> import('@/pages/Pay/index.vue')
const PaySuccess = ()=> import('@/pages/PaySuccess/index.vue')
const Center = ()=>import('@/pages/Center/index.vue')
const MyOrder = ()=>import('@/pages/Center/MyOrder/index.vue')
const GroupOrder = ()=>import('@/pages/Center/GroupOrder/index.vue')

export default [
    // 重定向路由
    {
        path: '/',
        redirect: '/home',
    },
    // 主页
    {
        path: '/home',
        // 这里注意下路由组件 这里是 component  不是 components
        component: Home,
        name: 'home',
    },
    // 注册界面
    {
        path: '/register',
        component: Register,
        // 路由对象中的元配置项 
        meta: {
            isHidden: true
        }
    },
    // 登录
    {
        path: '/login',
        component: Login,
        meta: {
            isHidden: true
        }
    },
    // 搜索界面
    {
        path: '/search/:keyword?',  // 占位符后面加 ？ 表示这个params参数可传可不传
        component: Search,
        name: 'search',  // 命名路由
        props(route){
            return {
                keyword: route.params.keyword,  // params参数
                keyword1: route.query.keyword1  // query参数
            }
        }
    },
    // 详情界面
    {
        path:'/detail/:goodsId',   // 这里需要params参数
        component: Detail,
    },
    // 加购成功界面
    {
        path:'/addcartsuccess',   
        component: AddCartSuccess,
        // 路由独享守卫
        beforeEnter: (to,from,next) => {
            // 加购成功 需要携带query里面的 skuNum  以及sessionStorage里面需要有 skuInfo
            let skuNum = to.query.skuNum
            let skuInfo = sessionStorage.getItem('SKUINFO_KEY')
            // console.log('111');
            if(skuNum && skuInfo){
                alert('加购成功，正在跳转')
                next()
            }else{
                alert('加购失败,未获取到订单号以及订单信息')
                next('/')
                // next(false)   // 页面会显示不全
            }
        },
    },
    // 购物车界面
    {
        path: '/shopcart',
        component: ShopCart,
        name: 'shopcart',
    },
    // 结算界面
    {
        path: '/trade',
        component: Trade,
        name: 'trade',
        beforeEnter: (to,from,next) => {
            // 这里如果需要用到 this 的话 需要借助一个回调函数 next()
            if(from.name === 'shopcart'){
                alert('正在跳转到交易界面')
                next()
            }else{
                alert('只能从购物车界面跳转到交易界面')
                // this.$message.error('只能从购物车界面跳转到交易界面')
                next('/')
            }
        }
    },
    // 支付界面
    {
        path: '/pay',
        component: Pay,
        name: 'pay',
        beforeEnter: (to,from,next)=>{
            if(from.name === 'trade'){
                next()
            }else{
                alert('只能从交易界面才能跳转到支付界面')
                next('/')
            }
        },
    },
    // 支付成功界面
    {
        path: '/paysuccess',
        component: PaySuccess,
        name: "paysuccess",
        beforeEnter: (to,from,next)=>{
            if(from.name === 'pay'){
                next()
            }else{
                alert('只能从支付界面才能跳转到支付成功界面')
                next('/')
            }
        }
    },
    // 个人中心  订单页面
    {
        path: '/center',
        component: Center,
        // name: 'center',
        children: [
            // 我的订单
            {
                path: 'myorder',
                component: MyOrder,
                name: 'myorder'
            },
            // 团购订单
            {
                path: 'grouporder',
                component: GroupOrder,
            },
            // 重定向到 我的订单
            {
                path: '',
                redirect: 'myorder',
            }
        ]
    },
    // 组件间通信
    {
        path: '/communication',
        component: () => import('@/pages/Communication/Communication'),
        children: [
          {
            path: 'event',
            component: () => import('@/pages/Communication/EventTest/EventTest'),
            meta: {
              isHideFooter: true
            },
          },
          {
            path: 'model',
            component: () => import('@/pages/Communication/ModelTest/ModelTest'),
            meta: {
              isHideFooter: true
            },
          },
          {
            path: 'sync',
            component: () => import('@/pages/Communication/SyncTest/SyncTest'),
            meta: {
              isHideFooter: true
            },
          },
          {
            path: 'attrs-listeners',
            component: () => import('@/pages/Communication/AttrsListenersTest/AttrsListenersTest'),
            meta: {
              isHideFooter: true
            },
          },
          {
            path: 'children-parent',
            component: () => import('@/pages/Communication/ChildrenParentTest/ChildrenParentTest'),
            meta: {
              isHideFooter: true
            },
          },
          {
            path: 'scope-slot',
            component: () => import('@/pages/Communication/ScopeSlotTest/ScopeSlotTest'),
            meta: {
              isHideFooter: true
            },
          }
        ],
      },
]